import {FlatList, StyleSheet, TouchableOpacity, View} from 'react-native';
import {ObserverText} from './ObserverText';
import {ObserverView} from './ObserverView';
import {
  dpw100,
  dpw12,
  dpw14,
  dpw16,
  dpw18,
  dpw4,
  dpw56,
  dpw8,
} from '../constants';
import {Empty} from './Empty';
import {BindItem} from '../mobx/home';
import {Img} from './Img';
import {SvgCircleRight} from './svg';
import {ReactElement} from 'react';

interface ScrollHProps {
  data: any[];
  style?: Record<string, any>;
  title?: string;
  isRightIcon?: boolean;
  renderItem?: () => ReactElement;
  onRightPress?: any;
  goDetail: any;
}

export const ScrollH = ({
  data,
  style,
  title,
  isRightIcon = true,
  renderItem,
  onRightPress,
  goDetail,
}: ScrollHProps) => {
  const _renderItem = ({item}: {item: BindItem}) => {
    return (
      <TouchableOpacity
        style={styles.item}
        onPress={() => {
          if (typeof goDetail === 'function') {
            goDetail(item.BID);
          }
        }}>
        <Img style={styles.img} url={item.ExtensionUrl} resizeMode="cover" />
        <ObserverText
          tKey={item.Title}
          numberOfLines={1}
          ellipsizeMode="tail"
        />
      </TouchableOpacity>
    );
  };

  return (
    <ObserverView style={{...styles.box, ...style}}>
      {Array.isArray(data) && data.length > 0 ? (
        <FlatList
          data={data}
          renderItem={renderItem || _renderItem}
          horizontal
          showsHorizontalScrollIndicator={false}
          keyExtractor={it => `${it.BID}`}
        />
      ) : (
        <Empty type="history" />
      )}
      <TouchableOpacity
        style={{
          paddingBottom: !data || !data.length ? dpw18 : 0,
          paddingLeft: dpw8,
        }}
        onPress={onRightPress}>
        <ObserverText
          style={styles.title}
          tKey={title || 'viewHistory'}
          type="desc"
        />
        {isRightIcon && (
          <View style={styles.right}>
            <SvgCircleRight />
          </View>
        )}
      </TouchableOpacity>
    </ObserverView>
  );
};

const styles = StyleSheet.create({
  box: {
    marginHorizontal: dpw16,
    paddingHorizontal: dpw8,
    borderRadius: dpw8,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: dpw8,
  },
  title: {
    width: dpw14,
    marginHorizontal: 'auto',
    lineHeight: dpw16,
  },
  item: {
    width: dpw100,
    marginRight: dpw8,
  },
  img: {
    width: '100%',
    height: dpw56,
    borderRadius: dpw8,
    marginBottom: dpw4,
  },
  right: {
    marginHorizontal: 'auto',
    marginTop: dpw4,
  },
});
